<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Example: Setting Menu Configuration Properties At Runtime (YUI Library)</title>

                <!-- Standard reset and fonts -->

        <link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
        <link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">

            

        <!-- Logger CSS -->

        <link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">

         

        <!-- CSS for Menu -->

        <link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
 

        <!-- Page-specific styles -->

        <style type="text/css">

            body { margin:.5em; }

            h1 { font-weight:bold; }

            li.yuimenuitem a em {
            
                font-style:italic;
            }
            
            li.yuimenuitem strong {
            
                font-weight:bold;
            
            }

            p em {
            
                text-decoration:underline;
            
            }

            #logs {

                position:absolute;
                bottom:0;
                right:0;
            
            }

            .example12 {

                background-color:#9c9;
            
            }

            p#clicknote {

                margin-top:1em;

            }

            p#clicknote em {
            
                font-weight:bold;
            
            }

        </style>

                <!-- Namespace source file -->

        <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>

        <!-- Dependency source files -->

        <script type="text/javascript" src="../../build/event/event.js"></script>
        <script type="text/javascript" src="../../build/dom/dom.js"></script>

            
        <!-- Logger source file -->

        <script type="text/javascript" src="../../build/logger/logger.js"></script>

        
        <!-- Container source file -->
        <script type="text/javascript" src="../../build/container/container_core.js"></script>

        <!-- Menu source file -->
        <script type="text/javascript" src="../../build/menu/menu.js"></script>

        <!-- Page-specific script -->

        <script type="text/javascript">

            // "load" event handler for the window

            YAHOO.example.onWindowLoad = function(p_oEvent) {

                // "config change" event handler for each menu item
    
                function onMenuItemConfigChange(p_sType, p_aArguments, p_oMenuItem) {
    
                    var sPropertyName = p_aArguments[0][0],
                        sPropertyValue = p_aArguments[0][1];
    
                    YAHOO.log(
                        (
                        "Index: " + this.index + ", " +
                        "Group Index: " + this.groupIndex + ", " +
                        "Custom Event Type: " + p_sType + ", " +                  
                        "\"" + sPropertyName + "\" Property Set To: \"" + sPropertyValue + "\""
                        ),
                        "info",
                        "example12"
                    );
                
                }


                // Create a menu

                var oMenu = new YAHOO.widget.Menu("basicmenu"),

                    // Define the items for the menu
    
                    aMenuItemData = [
                    
                        "MenuItem 0",
                        "MenuItem 1",
                        "MenuItem 2",
                        "MenuItem 3",
                        "MenuItem 4",
                        "MenuItem 5"
    
                    ],
    
                    nMenuItems = aMenuItemData.length,
                    
                    oMenuItem;
                

                for(var i=0; i<nMenuItems; i++) {

                    oMenuItem = oMenu.addItem(aMenuItemData[i]);

                    oMenuItem.cfg.configChangedEvent.subscribe(onMenuItemConfigChange, oMenuItem, true);

                }


                oMenu.render(document.body);
    
                oMenu.show();


                // Set the MenuItem configuration properties

                oMenu.getItem(0).cfg.setProperty("selected", true);
                oMenu.getItem(1).cfg.setProperty("disabled", true);
                oMenu.getItem(2).cfg.setProperty("helptext", "Help Me!");
                oMenu.getItem(3).cfg.setProperty("emphasis", true);
                oMenu.getItem(4).cfg.setProperty("strongemphasis", true);  
                oMenu.getItem(5).cfg.setProperty("checked", true);
                

                var oLogs = document.createElement("div");
                oLogs.id = "logs";
                
                document.body.appendChild(oLogs);

                var oLogReader = new YAHOO.widget.LogReader("logs");


                function onMenuToggleMouseDown(p_oEvent) {

                    YAHOO.util.Event.stopPropagation(p_oEvent);
                                    
                    oMenu.show();
                
                }

                YAHOO.util.Event.addListener("menutoggle", "mousedown", onMenuToggleMouseDown);


                /*
                     Add a "mousedown" event handler to prevent the menu from 
                     hiding when the user mouses down on the logger.
                */

                function onLogsMouseDown(p_oEvent) {

                    YAHOO.util.Event.stopPropagation(p_oEvent);

                }

                YAHOO.util.Event.addListener("logs", "mousedown", onLogsMouseDown);

            }


            YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
            
        </script>

    </head>
    <body>

        <h1>Example: Setting Menu Configuration Properties At Runtime (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
        <p>This example demonstrates how to set MenuItem configuration properties at runtime and listen for the changes through the "configChangedEvent."</p>
        <p id="clicknote"><em>Note:</em> By default clicking outside of a menu will hide it.  Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked.  Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
        <button id="menutoggle">Show Menu</button>

    </body>
</html>